<template>
  <!-- 添加或修改到货单对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body :close-on-click-modal="false" v-dialogDrag>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-tabs v-model="activeName" class="detail-tab" type="card">
        <el-tab-pane label="基本信息" name="first">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="删除标志" prop="delFlag">
                <el-input v-model="form.delFlag" placeholder="请输入删除标志"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" placeholder="请输入备注"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单编号" prop="nos">
                <el-input v-model="form.nos" placeholder="请输入订单编号"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单日期" prop="ddDate">
                <el-date-picker clearable
                                v-model="form.ddDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择订单日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="需求日期" prop="subDate">
                <el-date-picker clearable
                                v-model="form.subDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择需求日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="税率" prop="tax">
                <el-input v-model="form.tax" placeholder="请输入税率"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户id" prop="customerId">
                <el-input v-model="form.customerId" placeholder="请输入客户id"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户名称" prop="customerName">
                <el-input v-model="form.customerName" placeholder="请输入客户名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否打款" prop="isBuy">
                <el-input v-model="form.isBuy" placeholder="请输入是否打款"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单金额" prop="money">
                <el-input v-model="form.money" placeholder="请输入订单金额"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="剩余欠款" prop="shengyu">
                <el-input v-model="form.shengyu" placeholder="请输入剩余欠款"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="税额" prop="shuie">
                <el-input v-model="form.shuie" placeholder="请输入税额"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="总数量" prop="counts">
                <el-input v-model="form.counts" placeholder="请输入总数量"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="总吨位" prop="dunwei">
                <el-input v-model="form.dunwei" placeholder="请输入总吨位"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商id" prop="supplierId">
                <el-input v-model="form.supplierId" placeholder="请输入供应商id"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商名称" prop="supplierName">
                <el-input v-model="form.supplierName" placeholder="请输入供应商名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部门ID" prop="deptId">
                <el-input v-model="form.deptId" placeholder="请输入部门ID"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部门名称" prop="deptName">
                <el-input v-model="form.deptName" placeholder="请输入部门名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户id" prop="userId">
                <el-input v-model="form.userId" placeholder="请输入用户id"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业务员" prop="userName">
                <el-input v-model="form.userName" placeholder="请输入业务员"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审核状态" prop="state">
                <el-input v-model="form.state" placeholder="请输入审核状态"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="发票文件">
                <file-upload v-model="form.fpfile"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行行号" prop="hanghao">
                <el-input v-model="form.hanghao" placeholder="请输入银行行号"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行账号" prop="zhanghao">
                <el-input v-model="form.zhanghao" placeholder="请输入银行账号"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户行" prop="kaihuhang">
                <el-input v-model="form.kaihuhang" placeholder="请输入开户行"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="运费" prop="yunfei">
                <el-input v-model="form.yunfei" placeholder="请输入运费"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="到货金额" prop="daohuo">
                <el-input v-model="form.daohuo" placeholder="请输入到货金额"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开票总金额" prop="kaipiao">
                <el-input v-model="form.kaipiao" placeholder="请输入开票总金额"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="剩余开票额" prop="shengyukp">
                <el-input v-model="form.shengyukp" placeholder="请输入剩余开票额"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="采购id" prop="mainId">
                <el-input v-model="form.mainId" placeholder="请输入采购id"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="采购单号" prop="mainNo">
                <el-input v-model="form.mainNo" placeholder="请输入采购单号"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="材质单文件" prop="caizhidan">
                <el-input v-model="form.caizhidan" type="textarea" placeholder="请输入内容"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="过磅单文件" prop="guobangdan">
                <el-input v-model="form.guobangdan" type="textarea" placeholder="请输入内容"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="直发货回执单" prop="zhifahuo">
                <el-input v-model="form.zhifahuo" type="textarea" placeholder="请输入内容"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="送货人" prop="songhuoren">
                <el-input v-model="form.songhuoren" placeholder="请输入送货人"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="送货人电话" prop="songhuotel">
                <el-input v-model="form.songhuotel" placeholder="请输入送货人电话"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="送货人开户行" prop="songkaihuhang">
                <el-input v-model="form.songkaihuhang" placeholder="请输入送货人开户行"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="送货人账号" prop="songzhanghao">
                <el-input v-model="form.songzhanghao" placeholder="请输入送货人账号"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否打款供应商" prop="isSupplier">
                <el-input v-model="form.isSupplier" placeholder="请输入是否打款供应商"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否打款送货人" prop="isSong">
                <el-input v-model="form.isSong" placeholder="请输入是否打款送货人"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {addAction, getById, updateAction} from '@/api/manage';
import moment from 'moment';

export default {
  name: "LvDaohuoForm",
  data() {
    return {
      // 遮罩层
      loading: true,
      activeName: "first",
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      url: {
        getById: '/lvDaohuo/lvDaohuo/',
        add: '/lvDaohuo/lvDaohuo/add',
        edit: '/lvDaohuo/lvDaohuo/edit',
      },
    };
  },
  created() {

  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        nos: null,
        ddDate: null,
        subDate: null,
        type: null,
        ywType: null,
        tax: null,
        customerId: null,
        customerName: null,
        isBuy: null,
        money: null,
        shengyu: null,
        shuie: null,
        counts: null,
        dunwei: null,
        supplierId: null,
        supplierName: null,
        deptId: null,
        deptName: null,
        userId: null,
        userName: null,
        state: null,
        fpfile: null,
        hanghao: null,
        zhanghao: null,
        kaihuhang: null,
        yunfei: null,
        daohuo: null,
        kaipiao: null,
        shengyukp: null,
        mainId: null,
        mainNo: null,
        caizhidan: null,
        guobangdan: null,
        zhifahuo: null,
        songhuoren: null,
        songhuotel: null,
        songkaihuhang: null,
        songzhanghao: null,
        isSupplier: null,
        isSong: null
      };
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加到货单";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getById(this.url.getById, id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改到货单";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateAction(this.url.edit, this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.$emit('ok');
            });
          } else {
            addAction(this.url.add, this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.$emit('ok');
            });
          }
        }
      });
    },
  }
};
</script>
